import React, {Component, CSSProperties} from 'react';
import "./index.css"

interface IMdShow {
    id: string
    value: string;
    style?: CSSProperties
}

class MdShow extends Component<IMdShow, any> {

    componentDidMount() {
        // @ts-ignore
        let editor = editormd.markdownToHTML(this.props.id, {
            markdown: this.props.value,
            //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
            htmlDecode: "style,script,iframe",  // you can filter tags decode
            //toc             : false,
            tocm: true,    // Using [TOCM]
            //tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
            //gfm             : false,
            //tocDropdown     : true,
            // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
            emoji: true,
            taskList: true,
            tex: true,  // 默认不解析
            flowChart: true,  // 默认不解析
            sequenceDiagram: true,  // 默认不解析
        });
    }

    componentWillReceiveProps(nextProps: Readonly<IMdShow>, nextContext: any) {
        if (nextProps.value !== this.props.value) {
            // @ts-ignore
            let edit = editormd.markdownToHTML(this.props.id, {
                markdown: nextProps.value,
                //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
                htmlDecode: "style,script,iframe",  // you can filter tags decode
                //toc             : false,
                tocm: true,    // Using [TOCM]
                //tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
                //gfm             : false,
                //tocDropdown     : true,
                // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
                emoji: true,
                taskList: true,
                tex: true,  // 默认不解析
                flowChart: true,  // 默认不解析
                sequenceDiagram: true,  // 默认不解析
            });
        }


    }

    render() {
        return (
            <div style={this.props.style}>
                <div id={this.props.id} style={{background: "#ffffff00"}}>
                    <textarea defaultValue={null} onChange={null} style={{display: "none"}}/>
                </div>
            </div>
        );
    }
}

export default MdShow;
